<template>
  <div>
    <Head-Top></Head-Top>
    <div class="all_con">
      <div class="date_con">
        <div class="block2">
          <el-date-picker
            v-model="finalCountInfo.date_value2"
            type="daterange"
            align="right"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="finalCountInfo.pickerOptions2"
          >
          </el-date-picker>
        </div>
        <div>
          <el-button @click="searchByDate()" type="primary">查询</el-button>
        </div>
        <div style="margin-left: 50px">
          <el-button @click="exportExcel()" type="primary">导出报表</el-button>
        </div>
      </div>
      <div class="table_container">
        <table id="out-table">
          <div class="th_wrap">
            <tr class="tra">
              <th>市场总额（元）</th>
              <th>提现总额</th>
              <th>重消账户总额</th>
              <th>可提现总额</th>
              <th>提现手续费总额（元）</th>
              <th>审批总额（元）</th>
              <th>待审批总额（元）</th>
              <th>时间</th>
            </tr>
            <tr class="tra">
              <th>{{thData.sumMarket}}</th>
              <th>{{thData.money}}</th>
              <th>{{thData.SumConsumeMoney}}</th>
              <th>{{thData.ExtendSum}}</th>
              <th>{{thData.serviceCharge}}</th>
              <th>{{thData.judgeOver}}</th>
              <th>{{thData.awaitJudge}}</th>
            </tr>
          </div>
          <div class="td_wrap">
            <tr v-for="item in finalCountInfo.tableData">
              <td>{{item.realname}} {{item.phone}}</td>
              <td>市场业绩： {{item.Market}}</td>
              <td>重消账户： {{item.consumeMoney}}</td>
              <td>手续费： {{item.serviceCharge}}</td>
              <td>提现： {{item.cash}}</td>
              <td>审批通过： {{item.over}}</td>
              <td>待审批： {{item.await}}</td>
              <td>{{item.time}}</td>
            </tr>
          </div>
        </table>
      </div>
      <No-Data-Table v-show="$_.isEmpty(finalCountInfo.tableData)"/>
      <div class="pageination">
        <span style="float: left" class="demonstration">当前第1页</span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :current-page.sync="finalCountInfo.currentPage"
          :page-sizes="[10, 20 ,100, 200, 500,1000]"
          :page-size="finalCountInfo.limit"
          layout="sizes, prev, pager, next"
          :total="finalCountInfo.allTableData.length">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import HeadTop from '../components/HeadTop'
  import {mapActions, mapState, mapMutations} from 'vuex'
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'
  import NoDataTable from '../components/NODatasTable'
  export default {
    name: "FinalCount",
    components: {
      HeadTop,NoDataTable
    },
    computed: {
      ...mapState(['finalCountInfo']),
      thData(){
        return this.finalCountInfo.thData
      }
    },
    data() {
      return {

      }
    },
    methods: {
      ...mapActions(['getFinalCountList']),
      ...mapMutations(['finalCountCurPageChange']),
      exportExcel() {
        /* generate workbook object from table */
        let wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
        /* get binary string as output */
        let wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'})
        try {
          FileSaver.saveAs(new Blob([wbout], {type: 'application/octet-stream'}), '财务统计表.xlsx')
        } catch (e) {
          if (typeof console !== 'undefined') console.log(e, wbout)
        }
        return wbout
      },
      handleSizeChange(limit) {
        this.finalCountCurPageChange({limit})
      },
      handleCurrentChange(val) {
        this.finalCountCurPageChange({val})
      },
      initData(){
        let {date_value2}=this.finalCountInfo
        date_value2=date_value2+''
        let time1=''
        let time2=''
        if(!this.$_.isEmpty(date_value2)){
          console.log('date_value2__'+date_value2)
          time1=date_value2.substr(0,10)
          time2=date_value2.substr(11)
        }
        this.getFinalCountList({time1,time2})
      },
      searchByDate(){
        this.initData()
      }
    },
    mounted(){
      this.initData()
    }
  }
</script>

<style lang="less" scoped>
  @import "../style/table";

  table {
    font-size: 14px;
  }

  th, td {
    width: 180px;
    vertical-align: middle;
    padding: 12px;
    border-left: 1px solid #f0f0f0;
    border-right: none;
    /*text-align: center;*/
  }

  th {
    border-bottom: none;
  }

  th:nth-child(1) {
    border-left: none;
  }

  td:nth-child(1) {
    border-left: none;
  }

  .th_wrap {
    background: #3a8ee6;
  }

  .th_wrap .tra th {
    color: #fff;
  }

  .th_wrap th {
    border: none;
  }

  .th_wrap tr td {
    border: none;
    text-align: left;
  }

  .td_wrap {
    margin-top: 20px;
  }

  .block2 {
    margin-right: 0px;
  }
</style>
